<template>
    <div id="oldhome" class="bgGrayf8" v-cloak>
        <Header :goback="goback" :isempty="isempty" :title="header_title" :right_text="right_text"></Header>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class='topheader'>
            <div>
                <div v-if="isempty == true" class="empty">
                    <img :src="require('@/assets/images/jy_empty.png')" alt="">
                    <div class="font40 fontGrayB9 empty_font">请前往我的简历中创建简历，创建完成后，即可查看匹配岗位</div>
                    <div class="empty_button">
                        <span @click="gomy" class="bgBlueFC font40 fontWhite">我的简历</span>
                    </div>
                </div>
                <div v-else>
                    <div class="textL" v-if="tjlist.length > 0">
                        <div class="ts_station font40">推送岗位</div>
                        <div class="bgWhite ts_content" @click="todetail(item)" v-for="(item, i) in tjlist" :key="i">
                            <div class="disFlex">
                                <div class="disFlex">
                                    <span class="font44">{{item.department}}</span>
                                </div>
                                <span class="tip ts_tip" v-if="item.matchSpendLabel == '非常匹配'">{{item.matchSpendLabel}}</span>
                                <span class="tip ts_tip1" v-else-if="item.matchSpendLabel != '非常匹配' && item.matchSpendLabel != '不匹配'">{{item.matchSpendLabel}}</span>
                                <span class="tip ts_tip2" v-else-if="item.matchSpendLabel == '不匹配'">不匹配</span>
                            </div>
                            <div class="pt16">
                                <span class="font40 fontGreenBlue">{{item.postSalary}}</span>
                            </div>
                            <div class="gs font40">{{item.companyName}}</div>
                            <div class="disFlex flex_start">
                                <span class="bgGrayec font36 fontBlack2 pd">{{item.ageRequire}}</span>
                                <span class="bgGrayec font36 fontBlack2 pd">{{item.educationalRequireLabel}}</span>
                                <span class="bgGrayec font36 fontBlack2 pd">{{item.recruitNum}}人</span>
                            </div>
                            <div class="flex mt18">
                                <div class="disFlex">
                                    <img class="list_icon" :src="require('@/assets/images/avatar.png')" alt="">
                                    <span class="font40 fontBlack73">{{item.contactPerson}}</span>
                                </div>
                                <div class="disFlex pl64">
                                    <img class="list_icon" :src="require('@/assets/images/phone-telephone.png')" alt="">
                                    <span class="font40 fontBlack73">{{item.contactPhoneNumber}}</span>
                                </div>
                            </div>
                            <div class="flex mt18">
                                <img class="list_icon" :src="require('@/assets/images/local.png')" alt="">
                                <span class="font40 fontBlack73">{{item.address}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="textL">
                        <div class="ts_station font40">岗位列表</div>
                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadlist" :immediate-check="false" :offset='60'>
                            <div class="bgWhite ts_content" @click="todetail(item)" v-for="(item, i) in list" :key="i">
                                <div class="disFlex">
                                    <div class="disFlex">
                                        <span class="font44">{{item.department}}</span>
                                    </div>
                                    <span class="tip ts_tip" v-if="item.matchSpendLabel == '非常匹配'">{{item.matchSpendLabel}}</span>
                                    <span class="tip ts_tip1" v-else-if="item.matchSpendLabel != '非常匹配' && item.matchSpendLabel != '不匹配'">{{item.matchSpendLabel}}</span>
                                    <span class="tip ts_tip2" v-else-if="item.matchSpendLabel == '不匹配'">不匹配</span>
                                </div>
                                <div class="pt16">
                                    <span class="font40 fontGreenBlue">{{item.postSalary}}</span>
                                </div>
                                <div class="gs font40">{{item.companyName}}</div>
                                <div class="disFlex flex_start">
                                    <span class="bgGrayec font36 fontBlack2 pd">{{item.ageRequire}}</span>
                                    <span class="bgGrayec font36 fontBlack2 pd">{{item.educationalRequireLabel}}</span>
                                    <span class="bgGrayec font36 fontBlack2 pd">{{item.recruitNum}}人</span>
                                </div>
                                <div class="flex mt18">
                                    <div class="disFlex">
                                        <img class="list_icon" :src="require('@/assets/images/avatar.png')" alt="">
                                        <span class="font40 fontBlack73">{{item.contactPerson}}</span>
                                    </div>
                                    <div class="disFlex pl64">
                                        <img class="list_icon" :src="require('@/assets/images/phone-telephone.png')" alt="">
                                        <span class="font40 fontBlack73">{{item.contactPhoneNumber}}</span>
                                    </div>
                                </div>
                                <div class="flex mt18">
                                    <img class="list_icon" :src="require('@/assets/images/local.png')" alt="">
                                    <span class="font40 fontBlack73">{{item.address}}</span>
                                </div>
                            </div>
                        </van-list>
                    </div>
                </div>
            </div>
        </van-pull-refresh>
        <div v-if="isempty == false" @click="godeliver" class="bottom_pos bgBlueFC">
            <img :src="require('@/assets/images/rootlist.png')" alt="">
            <div class="fontWhite font24">投递列表</div>
        </div>
    </div>
</template>

<script>
import Header from '@/components/oldheader.vue'
import { Toast } from 'vant';
import { getCurrentInstance,reactive } from 'vue'
    export default {
        components: {
            Header
        },
        data() {
            return {
                header_title: '就业扶助',
                header_img: require('@/assets/images/leftback_black.png'),
                right_text: '我的简历',
                list: [],
                tjlist: [],
                isempty: false,
                myjl: [],
                api: '',
                token: '',
                isLoading: false, //下拉刷新
                //加载
                loading: false,
                finished: false,
                pageNum: 1, // 页数
                pageSize: 8, //数量
                total: 0,
                idcard: '', //加密身份证号
            }
        },
        mounted() {
            this.token = this.$store.state.token;
            this.idcard = this.$store.state.idCard;
            this.api = getCurrentInstance().appContext.config.globalProperties.$http;
            var that = this;
            var data = {
                identityNumber: that.idcard
            }
            that.api.get('/personnel/h5/resumeInfo/queryOne', data).then(res => {
                var data = res.data;
                if(data.resumeInfo) {
                    that.isempty = false;
                } else {
                    that.isempty = true;
                }
                // 获取推荐职位
                that.getquery();
                // 获取职位列表
                that.getqueryPage();
            })
        },
        methods: {
            goback() {
                
            },
            // 岗位上拉加载
            loadlist() {
                this.pageNum++;
                this.getqueryPage();
            },
            // 重新加载
            onRefresh() {
                var that = this;
                that.list = [];
                that.pageNum = 1;
                that.finished = false;
				that.loading = true;
                that.getquery();
                that.getqueryPage();
            },
            // 获取推荐职位
            getquery() {
                // this.tjlist = this.$store.state.tslist;
                var that = this;
                that.api.get('/personnel/h5/postInfo/queryPush', {identityNumber: that.idcard}).then(res => {
                    that.tjlist = res.data;
                })
            },
            // 获取职位列表
            getqueryPage() {
                var that = this;
                var data = {
                    identityNumber: that.idcard,
                    pageNum: that.pageNum,
                    pageSize: that.pageSize
                };
                that.api.get('/personnel/h5/postInfo/queryPage', data).then(res => {
                    if(that.isLoading){
                        that.isLoading = false;
					}
                    if(res.data) {
                        var rows = res.data.records;
                        that.loading = false;
                        that.total = res.data.total;
                        if(rows == null || rows.length == 0) {
                            // 加载结束
                            that.finished = true;
                            return;
                        };
                        // 将新老数据合并
                        that.list = that.list.concat(rows);
                        // 如果列表数据条数>=总条数，不再触发滚动加载
                        if(that.list.length >= that.total) {
                            that.finished = true;
                        };
                    }
                }).catch(err => {
                    if(that.isLoading) {
                        that.isLoading = false;
                    }
                })
            },
            gomy() {
                if(this.isempty == true) {
                    this.$router.push('/oldresume');
                } else {
                    this.$router.push('/oldmyresume');
                }
            },
            todetail(item) {
                this.$router.push({
                    path: '/oldhomedetail',
                    query: {
                        id: item.postId
                    }
                })
            },
            godeliver() {
                this.$router.push('/olddeliver');
            }
        },
    }
</script>
<style src="@/assets/css/oldment.css"></style>
<style scoped>
#oldhome {
    width: 100%;
    height: 100%;
}
.empty {
    padding-top: 1.6rem;
}
.empty img {
    width: 3.2rem;
}
.empty_font {
    padding-top: 0.48rem;
    width: 5.6rem;
    margin: auto;
}
.pt16 {
    padding-top: 0.16rem;
}
.empty_button {
    padding-top: 0.64rem;
}
.empty_button span {
    display: inline-block;
    padding: 0.14rem 0.32rem;
    border-radius: 0.48rem;
}
.ts_station {
    padding: 0.32rem;
}
.bottom_pos {
    position: fixed;
    bottom: 1.6rem;
    right: 0.32rem;
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    line-height: 2;
    box-shadow: 0rem 0.16rem 0.28rem 0.04rem rgb(66 143 252 / 16%);
}
.pl64 {
    padding-left: 0.64rem;
}
.bottom_pos img {
    width: 0.48rem;
}
.pd {
    padding: 0.02rem 0.12rem;
    border-radius: 0.04rem;
    margin-left: 0.08rem;
}
.flex {
    display: flex;
}
</style>